<template>
  Test12
  <hr />
  mixins混入的数据
  <br />
  {{ msg }}
  <br />
  {{ showData(title) }}
  <br />
  <button @click="foo">执行mixins的foo</button>
  <button @click="fooA">执行mixins的fooA</button>
  <hr />
  <Son></Son>
  <SonMixin></SonMixin>
</template>

<script>
// 全局混入方法
// app.mixin({
//   created() {
//     console.log('全局混入的方法--created')
//   },
// })
import DemoMixin from './Mixin/01.DemoMixin.js'
import Son from './page/Son.vue'
import SonMixin from './page/SonMixin.vue'
// 导入的方法不能直接用
import showData from './showData'
export default {
  mixins: [DemoMixin],
  // 4.组件被合并
  components: { Son, SonMixin },
  created() {
    // 1.生命周期会被合并
    console.log('Test-created')
  },
  data() {
    return {
      // 2.返回的data中的数据Test优先，其他合并
      msg: 'Test里面的msg',
    }
  },
  methods: {
    foo() {
      // 3.返回的methods中的方法Test优先，其他合并
      console.log('Test-的foo被执行了')
    },
    showData(str) {
      return showData(str)
    },
  },
}
</script>

<style></style>
